<template>
    <div class="apppadding flex" style="font-size: 1.2em;padding-bottom: 0;">
        <Image @click="emits('clickInfo')" :src="userInfo?.headImg" class="avatar"></Image>
        <div style="margin-left: 20px;" @click="emits('clickInfo')">
            <div>{{ userInfo?.name }} <span style="margin-left: 1em;">{{ userInfo?.department?.name }}</span></div>
            <div style="color: var(--group-text-color-secondary);margin-top: 6px;">{{ userInfo?.phone }}</div>
        </div>
        <div style="flex-grow: 1;height: 100%;">
            <slot></slot>
        </div>
    </div>
    <div class="apppadding bottom" style="padding-top: 0;">
        <div>擅长：{{ userInfo?.remark }}</div>
        <div>订单数：{{ orderCount }}</div>
        <div>好评率：{{ '100%' }}</div>
    </div>
</template>
<script setup lang="ts">
import { Http } from "@b/model/base/http";
import { adminStore } from "@b/store";
import { Image } from "vant";
import { computed, ref } from "vue";
const sadminStore = adminStore()
const userInfo = computed(() => sadminStore.userInfo)
const emits = defineEmits(['clickInfo'])
const http = new Http()
const orderCount = ref(0)
const getOrderCount = async () => {
    const res = await http.request('/nursing_appointment/history_count_by_nurse')
    if (res) orderCount.value = res.total
}
(() => {
    getOrderCount()
})()
</script>
<style scoped>
.bottom>div {
    margin-top: 5px;
}
</style>